<template>
  <Card style="height: 100%">
    <Button type="primary" style="margin-bottom: 20px" @click="addVesion">新增模块</Button>
    <Table :columns="columns" :data="data" border>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row)">编辑</Button>
        <Button type="error" size="small" @click="remove(row.id)">删除</Button>
      </template>
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="page.page" :page-size="page.page_size" @on-change="handleChange"
              @on-page-size-change="handleSize" show-sizer show-total show-elevator/>
      </div>
    </div>

    <Modal v-model="visible" :title="title"  width="30">
      <Form ref="VersionFormValidate" :model="versionForm" :rules="ruleVersionForm" style="margin-top: 20px" :label-width="80">
        <FormItem label="模块名称" prop="name">
          <Input v-model="versionForm.name" placeholder="请输入"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
import {moduleAdd, moduleDel, moduleList, moduleUpdate} from "@/utils/api";

const columns = [
  {
    title: '模块名称',
    key: 'name'
  },
  {
    title: '创建人员',
    key: 'created_user'
  },
  {
    title: '创建时间',
    key: 'created'
  },
  {
    title: '修改时间',
    key: 'updated'
  },
  {
    title: '操作',
    slot: 'action',
    width: 150,
    align: 'center'
  }
]
export default {
  name: "version",
  data() {
    return {
      columns,
      data:[],
      visible: false,
      edit: false,
      title: "",
      total: 0,
      id: 0,
      page: {
        page:1,
        page_size: 10
      },
      versionForm: {
        name: "",
      },
      ruleVersionForm: {
        name: [
          {required: true, message: '模块名称不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  watch: {
    selectProject(newVal, oldVal) {
      this.query();
    }
  },
  computed: {
    selectProject: {
      get() {
        console.log('1111')
        return this.$store.state.selectProject;
      },
      set(value) {
        console.log('2222')
        this.$store.commit("updateSelectProject", value)
      }
    }
  },
  created() {
    this.query();
  },
  methods: {
    addVesion() {
      let project_id = localStorage.getItem("project")
      if (project_id === null) {
        this.$Message.warning("请先选择项目")
        return;
      }
      this.visible = true;
      this.title = "新建版本"
    },
    handleEdit(data) {
      this.edit = true;
      this.visible = true;
      this.versionForm.name = data.name;
      this.id = data.id;
    },
    handleChange(e){
      this.page.page = e;
      this.query();
    },
    handleSize(e){
      this.page.page_size = e
      this.query()
    },
    query() {
      const obj = {
        ...this.page,
        project: parseInt(localStorage.getItem("project"))
      }
      moduleList(obj).then(res=> {
        if (res.data.result === 1) {
          this.data = res.data.data.list;
          this.total = res.data.data.total;
        }
      })
    },
    ok() {
      this.$refs['VersionFormValidate'].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            const obj = {
              ...this.versionForm,
              project: parseInt(localStorage.getItem("project"))
            }
            moduleAdd(obj).then(res=>{
              if (res.data.result === 1) {
                this.$Message.success("创建成功!")
                this.cancel()
                this.query()
              } else {
                this.$message.error(res.data.error_message)
                return
              }
            })
          }else {
            const obj = {
              ...this.versionForm,
              id: this.id,
              project: parseInt(localStorage.getItem("project"))
            }
            moduleUpdate(obj).then(res => {
              if (res.data.result === 1){
                this.$Message.success("修改成功!")
                this.cancel();
                this.query();
              } else {
                this.$Message.error(res.data.error_message)
              }
            })
            // moduleUpdate(obj).then(res=>{
            //   if (res.data.errno !== 0) {
            //     this.$message.error(res.data.errmsg)
            //     return
            //   }
            //   this.$Message.success(res.data.data)
            //   this.cancel()
            //   this.query()
            // })
          }
        } else {
          this.visible = true
        }
      })
    },
    cancel() {
      this.$refs['VersionFormValidate'].resetFields();
      this.visible = false;
    },
    remove(id){
      this.$Modal.confirm({
                title: "删除提示",
                content: "是否确认删除？",
                okText: "确认",
                cancelText: "取消",
                onOk: async () => {
                  moduleDel({id: id}).then(res => {
                        if (res.data.result === 1){
                            this.$Message.success("删除成功!")
                            this.query();
                            return;
                        } else {
                            this.$Message.error(res.data.error_message)
                        }
                    })
                }
            })
    }
  }
}
</script>

<style scoped>

</style>
